<template>
    <div class="box">
        <div class="top">
            <van-search
  v-model="value"
  show-action
  label="地址"
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</van-search>
        </div>
     <div class="center">
        <div class="left">
            <van-sidebar v-model="active" >
  <van-sidebar-item title="热门推荐" />
  <van-sidebar-item title="OPPO" />
  <van-sidebar-item title="一加" />
  <van-sidebar-item title="平板电脑" />
  <van-sidebar-item title="智能穿戴" />
</van-sidebar>
        </div>
        <div class="right">
            oppo Find N 系列
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="primary">标签</van-tag>
    <van-tag plain type="primary">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="primary">标签</van-tag>
    <van-tag plain type="primary">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>
<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="primary">标签</van-tag>
    <van-tag plain type="primary">标签</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </template>
</van-card>
        </div>
     

     </div>
     <div class="footer">
    <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" to="/sy">首页</van-tabbar-item>
  <van-tabbar-item icon="search" to="/fen">分类</van-tabbar-item>
  <van-tabbar-item icon="friends-o" to="/go">购物车</van-tabbar-item>
  <van-tabbar-item icon="setting-o" to="/wo">我的</van-tabbar-item>
</van-tabbar>
    </div>
</div>
</template>
<script>

</script>
<style>
*{
    margin: 0;
    padding: 0;

}
html,body,#app,.box{
    width: 100%;
    height: 100%;


}
.left{
    width: 200px;
    height: 500px;
    float: left;
}
.right{
    width: 1000px;
    height: 500px;
    float: left;
}
</style>